<!DOCTYPE html>
<html lang="zh-Hans">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Part 3：HTML / CSS</title>
</head>

<body>
    <h1>P3 演示源码</h1>

    <h2>课程章节演示</h2>

    <ul>
        <li>显示类型—display <ul>
                <li>inline 和 block 取值<a href="./display.html">(display.html)</a> </li>
                <li>table 取值<a href="./display-table.html">(display-table.html)</a> </li>
            </ul>
        </li>
        <li>[资料] 视觉格式化模型<ul>
                <li>块格式化上下文 <a href="./vfm/bfc.html">vfm/bfc.html</a></li>
                <li>行盒 <a href="./vfm/vfm-line-boxes.html">vfm/vfm-line-boxes.html</a></li>
                <li>行盒高度 <a href="./vfm/ifc-height.html">vfm/ifc-height.html</a></li>
                <li>行内级元素垂直对齐方式 <a href="./vfm/ifc-vertical-align.html">vfm/ifc-vertical-align.html</a></li>
            </ul>
        </li>
        <li>[资料] 深入了解 inline-block <ul>
                <li>行内级元素垂直对齐方式 <a href="./vfm/ifc-vertical-align.html">vfm/ifc-vertical-align.html</a></li>
            </ul>
        </li>
        <li>元素浮动——float <ul>
                <li>文字环绕图片 <a href="./float.html">(float.html)</a></li>
                <li>父元素高度塌陷 <a href="./float-item.html">(float-item.html)</a></li>
            </ul>
        </li>
        <li>[资料] 清除浮动详解<ul>
                <li>清除前面兄弟元素浮动 <a href="./float-clear-margin.html">(float-clear-margin.html)</a></li>
            </ul>
        </li>
        <li>元素位置——position <a href="./position.html">position.html</a></li>
        <li>position 应用场景分析 <a href="./position.html">position.html</a></li>
        <li>float 布局 <ul>
                <li>固定宽度布局 <a href="./layout/float-fixed.html">(layout/float-fixed.html)</a> </li>
                <li>流体布局 <a href="./layout/float-fluid.html">(layout/float-fluid.html)</a> </li>
            </ul>
        </li>
        <li>元素层级——z-index <ul>
                <li>普通层级 <a href="./z-index.html">(z-index.html)</a></li>
                <li>z-index 层级 <a href="./z-index-z.html">(z-index-z.html)</a></li>
            </ul>
        </li>
        <li>flexbox 属性汇总 <a href="./flexbox.html">(flexbox.html)</a></li>
        <li>[资料] flexbox 剩余空间分配规则 <a href="./flexbox-sizerule.html">(flexbox-sizerule.html)</a></li>
        <li>[资料] grids 布局系统 <a href="./grid.html">grid.html</a></li>
        <li>transition 动画 <a href="./transition.html">(transition.html)</a></li>
        <li>[资料] 动画必备属性 transform<ul>
                <li>transform 简单 demo <a href="./transform/transform.html">(transform/transform.html)</a></li>
            </ul>
        </li>
        <li>缓动函数 <a href="./transition-timing-function.html">(transition-timing-function)</a></li>
        <li>animation 动画 <a href="./animation.html">(animation.html)</a></li>
        <li>viewport <ul>
                <li>viewport <a href="./viewport.html">(viewport.html)</a></li>
                <li>viewport-meta <a href="./viewport-meta.html">(viewport-meta.html)</a></li>
            </ul>
        </li>
        <li>[资料] retina 显示屏<ul>
                <li>devicePixelRatio（设备像素比）<a href="./dpr.html">(dpr.html)</a> </li>
                <li>1px demo <a href="./1px.html">(1px.html)</a> </li>
            </ul>
        </li>
        <li>媒体查询（media queries）<a href="./media-queries.html">media-queries.html</a></li>
        <li>响应式布局 <ul>
                <li>内容流式布局 <a href="./responsive/fluid.html">responsive/fluid.html</a></li>
                <li>固体 + 流式 <a href="./responsive/fixed.html">responsive/fixed.html</a></li>
                <li>切换显示形式 <a href="./responsive/style.html">responsive/style.html</a></li>
            </ul>
        </li>
        <li>响应式图片<ul>
                <li>图片大小 <a href="./responsive/img-max.html">responsive/img-max.html</a></li>
                <li>响应式图片 <a href="./responsive/img-media.html">responsive/img-media.html</a></li>
            </ul>
        </li>
    </ul>

    <h2>练习示例</h2>

    <ul>
        <li>完成浮动布局 <a href="./layout/float-fluid-demo.html">layout/float-fluid-demo.html</a></li>
    </ul>

    <h2>其他</h2>

    <ul>
        <li>元素的显示隐藏 <a href="./show.html">show.html</a></li>
        <li>深入了解 position <a href="./position-dive.html">position-dive.html</a></li>
        <li>grids 布局系统 示例 <a href="./960s">(960s)</a></li>
        <li>animation-fill-mode 示例 <a href="./animation-fill-mode.html">(animation-fill-mode.html)</a></li>
    </ul>
</body>

</html>